<template>
    <div class="listss">
        <ul class="tanxin">
            <li v-for="item, index in AllInfo" :key="item.id">
                <img :src="item.coverImgUrl" alt="">
                <i></i>
                <div class="lisen">
                    <span></span>
                    <span>{{ item.playCount }}</span>
                    <span></span>
                </div>
                <p>{{ item.name }}</p>
            </li>
        </ul>
    </div>
</template>
<script>

export default {

    data() {
        return {


        }
    },
    props: ["AllInfo"]
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";

.listss {
    padding-bottom: 60px;
    ul {
        // width: 706px;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
            position: relative;
            width: 140px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            margin-left: 30px;
            margin-right: 30px;
            margin-top: 30px;
            img {
                width: 140px;
                height: 140px;
            }
            p{
                cursor: pointer;
                &:hover{
                    text-decoration: underline;
                }
            }
            .lisen{
                width: 706px;
                position: absolute;
                background: rgba(0,0,0,0.4);
                border-top: 1px solid #000;
                border-bottom: 1px solid #000;
                color: #ccc;
                font-size: 12px;
                bottom: 50px;
                line-height: 20px;
            }
        }
    }
}
</style>